前言

不知不覺鐵人賽已經進行到一半，前半段的目標是介紹 VS Code 的功能，讓各種類型的開發者，都能簡單學習、使用。記得在 Day 01: 緣由、大綱 中提過，要撰寫各種語言的應用，因此在鐵人賽的後半段，將著重在介紹如何使用 VS Code 來開發不同的語言，內容會推薦幾款不錯的 Extension。

今天是第一篇寫語言的應用，那當然要寫目前最好入門的語言：HTML 囉。

IntelliSense

在 Day 02: 為什麼我會想要推薦 vs code 提過，vs code 使用 electron.js 開發，本身對於 HTML 的支援是內建的，因此不用特地下載 HTML 語言包 （要載還載不到）。

既然對於 HTML 是內建的，那麼，不僅僅只有 IntelliSense 的支援吧？

答案是肯定的，接下來介紹內建的項目：

Close tags

連結

你一定會感到納悶，這不是 Extension 嘛？

沒錯！你猜得十分正確。

VS Code 對於 HTML、Handlebars、Razor ，內建 close tag 的功能，而 Extension 的存在，是為了支援其他類型的檔案，例如：XML、PHP、Vue、JavaScript、TypeScript、JSX、TSX 等。

用法上使用簡單：

• 先輸入 <div，當輸入 > 時，會自動偵測此 HTML Tag 是否需要結束標籤，需要就會自動補上。

Emmet

讓我們引用一下維基的定義：

Emmet 使用特定的語法來展開小段程式碼，它類似CSS選擇器，使其成為完整的HTML程式碼。

簡而演之，就是輸入幾個關鍵字後，能轉換成我們需要的 HTML，簡化輸入的時間。舉個最經典的例子：

<!-- 輸入 -->
ul>li*3>span.hello$

<!-- 轉化成 -->
<ul>
  <li><span class="hello1"></span></li>
  <li><span class="hello2"></span></li>
  <li><span class="hello3"></span></li>
</ul>

一旦熟悉後，真的會被自己嚇到，怎麼可以這麼快？

Emmet 的語法非常多，因此需要進入官網好好閱讀文件（連結）。

排版，Formatting

VS Code 使用 npm package: js-beautify ，只要選取要排版的程式碼，按下特定按法，將會自動排版。特定按法如下：

• Windows: Ctrl + K, Ctrl + F
• macOS: ⌘K, ⌘F

想要更動排版的設定嗎？有兩個方法：

• 進入設定修改，步驟如下：
  • 滑鼠移到左下方，按下齒輪。
  • 點擊設定。
  • 開啟設定分頁後，在上方搜尋欄位，輸入 html.format。
  • 
  • 搜尋結果會顯示相關設定，接下來就自己研究吧。
• 下載 Extension，這邊推薦兩個：
  • Prettier - Code formatter
  • Beautify

hover

當游標移動到 HTML Tag 上，VS Code 將會搜尋 MDN Reference ，提供該 Tag 的定義。

接下來推薦兩個插件給開發 HTML 的工程師們。

IntelliSense for CSS class names in HTML

連結

強化 IntelliSense。當撰寫 HTML 的 Class ，會列出目前這份 HTML 有引用、撰寫的 class 名稱。

引用來源如下：

• <link> 提供的 stylesheet。
• <style></style> 內的 Class 。

Live Server

連結

即時更新 HTML 在瀏覽器上的畫面，達到預覽的效果。

開啟的步驟如下：

• 開啟要預覽的 .html 檔案。
• 將滑鼠挪到狀態列的右下方，點擊 Go Live。
• 
• 預覽畫面會自動使用瀏覽器開啟，網址使用：127.0.0.1:5500。

關掉的步驟如下：

• 將滑鼠挪到狀態列的右下方，點擊 Port: 5500。
• 

結論

熟悉以上幾個功能，就能快速且舒服地開發 HTML，這對工程師而言是多麽幸福的一件事啊！